<template>
    <div class="detect-box set-select page">
        <div class="hnli-popup hp3 flex-center">
            <div class="flex-center flex-left">
                <input v-model="query.text" class="search" style="background: #394760;height: 40px;" placeholder="方案名称">

                <el-date-picker v-model="query.data" class="de-data" type="date" style="width: 200px; height: 40px;"
                    placeholder="选择日期">
                </el-date-picker>

                <el-select v-model="query.state" class="detect-search" style="width: 120px;" placeholder="Select"
                    size="large">
                    <el-option label="禁用" :value="0" />
                    <el-option label="启用" :value="1" />
                </el-select>

                <button class="oval-button" style="height: 40px;">查 询</button>
            </div>
            <div class="flex-rgiht">
                <button class="oval-button flex-center" style="background: #FABD68;margin-right: 100px; height: 40px;"
                    @click="setAddVisible(true)"><img src="@/assets/img/uploading.png"
                        style="width: 20px;height: 20px;" />上传excil</button>
            </div>
        </div>
        <div class="detect-table">
            <div class="table-box detect-table-box flex" style="height: calc(100% - 0px);">
                <el-table :data="tableData" class=" custom-table" style="height: calc(100% - 50px);"
                    :row-class-name="getRowClassName" @row-click="handleRowClick">
                    <el-table-column prop="name" label="方案名称" align="center" />
                    <el-table-column prop="time" label="最近启动时间" align="center" />

                    <el-table-column label="操作" align="center" width="280">
                        <template #default="scope">
                            <div class="flex-img">
                                <span class="state flex-center" :class="scope.row.state == 0 ? 'state0' : 'state1'">
                                    <img v-show="scope.row.state == 0" src="@/assets/img/st2.png"
                                        style="width: 6px;height: 10px; margin-right: 5px;" />
                                    <img v-show="scope.row.state == 1" src="@/assets/img/st1.png"
                                        style="width: 6px;height: 11px; margin-right: 5px;" />
                                    {{ scope.row.state == 0 ? '启动探测' : '探测中...' }}</span>
                                <div class="result flex-center" @click="postResultList(scope.row)" @click.stop.prevent><img
                                        src="@/assets/img/de2.png" style="width: 20px;height: 20px; margin-right: 5px;" />
                                    结果监测</div>

                                <el-popover placement="bottom" :width="150" trigger="hover">
                                    <template #reference>
                                        <div class="result flex-center" @click.stop.prevent @click="postRightList"><img
                                                src="@/assets/img/de1.png"
                                                style="width: 20px;height: 20px; margin-right: 5px;" /> 电台状态</div>
                                    </template>
                                    <template #default>
                                        <div class="detect-result">
                                            <div class="result flex-center"><img src="@/assets/img/de1.png"
                                                    class="flex-left"
                                                    style="width: 20px;height: 20px; margin-right: 5px;" /><text
                                                    class="flex-left"> 电台状态</text></div>
                                            <el-scrollbar style="height: 180px;">
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(主)重庆万州(主)重庆万州(主)重庆万州"
                                                        placement="top">
                                                        <div class="ellipsis-text flex-left">(主)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq1.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(从)重庆万州(主)重庆万州" placement="top">
                                                        <div class="ellipsis-text flex-left">(从)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq1.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(主)重庆万州(主)重庆万州(主)重庆万州"
                                                        placement="top">
                                                        <div class="ellipsis-text flex-left">(主)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq3.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(主)重庆万州(主)重庆万州(主)重庆万州"
                                                        placement="top">
                                                        <div class="ellipsis-text flex-left">(主)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq1.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="重庆万州F006" placement="top">
                                                        <div class="ellipsis-text flex-left">重庆万州F006</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq2.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                            </el-scrollbar>
                                        </div>
                                    </template>

                                </el-popover>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- <div class="detect-detail" v-show="detectShow"> -->
                <div class="detect-detail" v-show="detectShow">
                    <el-form :model="form" label-width="80px">
                        <el-form-item label="方案名称:">
                            <div class="name">方案名称</div>
                        </el-form-item>
                        <el-form-item label="主站:">
                            <el-col :span="6">
                                <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="height: 38px;width: 100px;">
                                    <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center; color: #9A9DAA;">从站:</el-col>
                            <el-col :span="6">
                                <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="height: 38px;width: 100px;">
                                    <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col class="line" :span="3" style="text-align: center; color: #9A9DAA;margin-right: 5px;">禁用频率:</el-col>
                            <el-col :span="5    ">
                                <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="height: 38px;width: 70px;">
                                    <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                              
                            </el-col>
                            <el-col :span="1">
                                <img src="@/assets/img/list-check.png" class="cursor"  @click="setCompileVisible(true, null)" style="width: 25px;height: 25px;margin-left: -10px; margin-top: 10px;"/>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="监听站:">
                            <el-col :span="14">
                                <div class="flex"
                                    style="background: #394760; width: 100%; padding: 4px;border-radius: 20px; height: 35px;">
                                    <div class="li-choose flex-items" v-for="(item, idx) in compile.array.slice(0, 3)"
                                        :key="idx">
                                        <span class="flex-left">{{ item }}</span>
                                        <img class="flex-right" src="@/assets/img/close-circle-fill.png"
                                            style="width: 20px;height: 20px;" @click="deleteCompile(idx)" />
                                    </div>
                                    <div style="color: white;font-size: 20px;width: 50px;text-align: center;"
                                        v-show="compile.array.length > 3">...</div>
                                </div>
                            </el-col>
                            <el-col class="line" :span="9" style="text-align: right; color: #9A9DAA;">
                                <div class="flex cursor">
                                    <span color="#FABD68" class="flex-s"
                                        style="color:white;width:80px;height:35px;margin:0 10px;" round
                                        @click="setCompileVisible(true, null)">
                                        <img src="@/assets/img/uploading.png" style="width: 20px;height: 20px;" />上传CSV
                                    </span>

                                    <el-button color="#00BBF0" style="color:white;width:80px;height:35px;"
                                        round>保存</el-button>
                                </div>
                            </el-col>

                        </el-form-item>



                    </el-form>

                    <div class="monitor-table">
                        <el-table :data="tableData" :header-cell-style="{ background: '#1E2435' }">
                            <el-table-column prop="time" label="时段" align="center" width="180" />
                            <el-table-column prop="state" label="始频率" align="center" />
                            <el-table-column prop="state" label="终频率" align="center" />
                            <el-table-column prop="state" label="执行次数" align="center" />

                            <el-table-column label="操作" align="center">
                                <template #default="scope">
                                    <div class="flex-img">
                                        <img src="@/assets/img/compile.png" @click="setAddVisible(true, scope.row)"
                                            style="width: 20px;height: 20px;" />
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </div>
            </div>

        </div>
        <div class="detect-pagination flex" :class="detectShow ? 'detect-pagination2' : ''">
            <div class="flex-left" style="margin-left: 20px; color: #9A9DAA;">共有{{ total }}项数据</div>
            <el-pagination class="flex-right" layout="prev, pager, next, jumper" style="margin-right: 50px;" :total="total"
                small />
        </div>
        <ResultList :visible="resultListData.visible" :gridData="resultListData.gridData" :title="resultListData.title" @updateVisible="updateResultList">
        </ResultList>
        <RightList :visible="rightListData.visible" :gridData="rightListData.gridData" @updateVisible="updateRightList">
        </RightList>

        <el-dialog title="24小时任务列表编辑" v-model="addVisible" width="400">
            <div class="add-form">
                <el-form ref="addDetect" :model="addDetect" label-width="80px">
                    <el-form-item label="时间段:">
                        <el-select v-model="query.state" style="  width: 250px;" placeholder="Select" size="large">
                            <el-option label="01:00-02:00" :value="0" />
                            <el-option label="02:00-03:00" :value="1" />
                            <el-option label="04:00-05:00" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="起始频率:">
                        <div class="flex-center" style="align-items: center;">
                            <el-input style="height: 38px; width: 90px;" v-model="addDetect.frequencyStart"></el-input>
                            <text style="margin: 0 5px;">结束频率:</text>
                            <el-input style="height: 38px; width: 90px;" v-model="addDetect.frequencyEnd"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="功率:">
                        <el-select v-model="query.power" style=" width: 250px;" placeholder="Select" size="large">
                            <el-option label="1" :value="0" />
                            <el-option label="2" :value="1" />
                            <el-option label="2" :value="1" />
                        </el-select>
                    </el-form-item>
                </el-form>

                <button class="oval-button" @click="setAddVisible(false)"
                    style="height: 40px;width: 80px;margin: 50px 0 0 250px;">
                    确定</button>

            </div>

        </el-dialog>


        <el-dialog title="禁用频率表编辑" v-model="compile.visible" width="400">
            <div class="add-form">
                <div class="flex-s" style="margin-bottom: 20px;">
                    <img src="@/assets/img/lij2.png" class="flex-left"
                        style="width: 25px;height: 30px; margin: 0px 10px 0 0;" />
                    <div class="flex-left">
                        <el-select v-model="query.state" style="width: 250px;" placeholder="Select" size="large">
                            <el-option label="01:00-02:00" :value="0" />
                            <el-option label="02:00-03:00" :value="1" />
                            <el-option label="04:00-05:00" :value="2" />
                        </el-select>
                    </div>
                    <div class="flex-left">
                        单位:Mhz
                    </div>

                </div>
                <div class="add-list">
                    <el-scrollbar style="height: 200px;">
                        <div class="add-button flex">
                            <div class="add-li flex-items" v-for="(item, idx) in compile.array" :key="idx">
                                <span class="flex-left">{{ item }}</span>
                                <img class="flex-right" src="@/assets/img/close-circle-fill.png"
                                    style="width: 20px;height: 20px;" @click="deleteCompile(idx)" />
                            </div>
                            <el-input v-show="compile.show" v-model="compile.num" class="add-input" style=""
                                placeholder="输入字符" @keyup.enter="addInputChange" @blur="addInputChange"
                                @input="handleInput"></el-input>
                            <div class="add-li flex-s" style="background: #46E5CB;text-align: center; color: #036EB7;"
                                @click="compile.show = true">
                                +
                            </div>
                        </div>
                    </el-scrollbar>
                </div>


                <div class="flex-s add-end">
                    <button class="oval-button" style="background: #FABD68;">创建副本</button>
                    <button class="oval-button" style="background: none;border: solid 1px white;">新建</button>
                    <button class="oval-button" style="background: #00BBF0;">保存</button>
                </div>

            </div>

        </el-dialog>



    </div>
</template>
    
<script>
import ResultList from '@/components/detect/set/resultList.vue';
import RightList from '@/components/detect/set/rList.vue';

export default {
    props: {

    },
    name: 'TelegramListFull',
    data() {
        return {
            search: '',
            total: 1000,
            tableData: [
                { id: 'f001', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f002', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f003', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f004', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f005', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f006', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f007', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f008', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f009', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f010', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f011', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f012', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f013', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f014', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f015', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f016', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f017', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f018', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f019', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f020', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f021', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f022', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f023', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f024', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
            ],
            selectedRow: null,
            form: null,
            masterIndex: 1,
            detectShow: false,//右边详细栏
            master: [{ name: "名字1", id: 1 }, { name: "名字2", id: 2 }, { name: "名字2", id: 3 },],
            query: { data: null, text: "", state: 1 },
            currentPage: 5,
            pageSize: 5,
            disabled: false,
            resultListData: {
                visible: false,
                gridData: [],
                title:"测试万州电台重庆电台连续探测执行结果逐条展示表"
            },
            rightListData: {
                visible: false,
                gridData: [],
            },
            addVisible: false,
            addDetect: {
                timeStart: 0,
                timeEnd: 0,
                frequencyStart: 0,
                frequencyEnd: 0,
                power: 0,
            },
            compile: {
                visible: false,
                array: [3.32, 3.33, 3.34, 5.3],
                show: false,
                num: null,
            },
        }
    },
    components: {
        ResultList,
        RightList
    },

    methods: {
        setListShow() {
            // this.$emit('setListShow', false);
        },
        tableRowClass(value) {
            // console.log(value);
        },
        getRowClassName({ row }) {
            return row === this.selectedRow ? 'click' : '';
        },
        // 处理行点击事件
        handleRowClick(row) {
            this.detectShow = true;
            this.form = row;
            this.selectedRow = row;
        },
        postResultList(value) {
            this.resultListData.visible = true;
            this.resultListData.gridData = [
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
            ]
        },
        postRightList(value) {
            this.rightListData.visible = true;
            this.rightListData.gridData = [
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
            ]
        },
        updateResultList(value) {
            this.resultListData.visible = value;
        },
        updateRightList(value) {
            this.rightListData.visible = value;
        },
        setAddVisible(value,row) {
            if (value) {//打开
                this.addVisible = true;
            } else {//关闭
                this.addVisible = false;
            }
        },
        setCompileVisible(value, data) {
            if (value) {//新增
                this.compile.visible = true;
            } else {//提交
                this.compile.visible = false;
            }
        },
        addInputChange() {
            if (!(this.compile.num == null || this.compile.num == '')) {
                this.compile.array.push(this.compile.num);
                this.compile.num = null;
            }
            this.compile.show = false;
        },
        deleteCompile(index) {
            this.compile.array.splice(index, 1);
        },
        handleInput() {
            this.compile.num = this.compile.num.replace(/[^\d.]/g, ''); // 清除非数字和点
            this.compile.num = this.compile.num.replace(/^\./g, ''); // 首位不能是点
            this.compile.num = this.compile.num.replace(/\.{2,}/g, '.'); // 保证只有一个点
            this.compile.num = this.compile.num.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 保证小数点只出现一次
            this.compile.num = this.compile.num.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 保留两位小数
        },


    }
}
</script>

<style lang="scss">
.detect-box {
    background: linear-gradient(to left, #1D2435, #2C334C);

    // 去除日期选择器样式
    .el-input__wrapper {
        --el-input-border: none;
        --el-input-border: none;
        background-color: #171D2C;
        box-shadow: 0 0 0 0;
    }

    /* //此代码是让每行左侧变圆 */
    .el-table .el-table__row td:first-child {
        border-radius: 50px 0 0 50px;
        padding: 2px;
        z-index: 999;
        padding-left: 20px;
    }

    /* //此代码是让每行右边侧变圆 */
    .el-table .el-table__row td:last-child {
        border-radius: 0 50px 50px 0;
        z-index: 999;
        padding: 2px;
    }

    .el-select {
        margin: 5px 0;
        --el-select-input-focus-border-color: none;
        --el-select-border-color-hover: none;

    }

    .de-data .el-input__wrapper,
    .detect-search .el-input__wrapper {
        border-radius: 50px;
        margin: 0 10px;
        background: #394760;
        color: #9A9DAA;
    }

    .detect-search .el-input__inner {
        // margin-top: 4px;
        color: #9A9DAA;
    }

    // 点击事件
    .click.el-table__row td:last-child {
        border-radius: 0 0 0 0;
        z-index: 999;
    }


    .click.el-table__row td {
        background-color: #161B27 !important;
    }

    .click.el-table__row {
        background-color: #161B27 !important;
    }

    .click.el-table__row td:first-child {
        border-radius: 50px 0 0 50px;
        padding: 2px;
        z-index: 999;
        padding-left: 20px;
    }

    .click.el-table__row td:last-child {
        border-radius: 0 0px 0px 0;
        z-index: 999;
        padding: 2px;
    }

    // 新增
    .el-dialog__header {
        margin-right: 0;
        background: linear-gradient(to right, #313B53, #272F43);

    }

    .el-dialog__title {
        color: #9A9DAA;
        font-size: 14px;
    }

    .el-dialog {
        --el-dialog-bg-color: linear-gradient(to right, #2C334C, #1D2435);
    }

    .add-form {

        .el-input__wrapper {
            border-radius: 50px;
            background-color: #394760;

        }

        .el-form-item {
            align-items: center;
        }

        .el-input__inner {
            color: #EDEDED;
        }



        .add-list {
            height: 200px;
            background: #1D232F;
            width: 398px;
            position: relative;
            left: -19px;


            .add-button {
                width: 398px;
                display: flex;
                flex-wrap: wrap;

                .add-li {
                    color: white;
                    width: 75px;
                    height: 35px;
                    background: #2B526F;
                    border-radius: 30px;
                    padding: 0 5px;
                    margin: 10px 5px;
                }

                .add-input {
                    width: 85px;
                    height: 35px;
                    margin: 10px 5px;
                    font-size: 12px;
                    font-size: 18px;
                }
            }
        }





        
        .add-end{
                margin: 30px 0 0 10px;
                width: 100%;
                .oval-button{
                    margin: 0 5px;
                    height: 40px;    
                }
        }
    }
}


.detect-table {
    height: calc(100% - 100px);

    .detect-table-box {
        height: calc(100% - 150px);
    }

    background: linear-gradient(to left, #1D2435, #2C334C);

    .el-table tr {
        background-color: none;
        background: none;
    }

    .state {
        width: 78px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        border-radius: 30px;
        color: white;
        cursor: pointer;
        /* 修改光标样式为手型 */
        margin: 0 2px;
        white-space: nowrap;
    }

    .state0 {
        background: #036EB7;
        border: solid 1px #74C8CE;
    }

    .state1 {
        background: #FABD68;
        border: solid 1px #FBD580;
    }

    .result {
        margin: 0 2px;
        cursor: pointer;
        /* 修改光标样式为手型 */
        white-space: nowrap;
    }

}




// 详细列表
.detect-detail {
    width: 1000px;
    background: #161B27;
    border-radius: 5px;
    padding: 20px;

    .el-form-item__label {
        color: #9A9DAA;
        font-size: 14px;
        line-height: 40px;
    }

    .name {
        background: #2CA6E0;
        width: 100%;
        border-radius: 20px;
        color: white;
        padding: 10px;
        line-height: 20px;
        padding-left: 20px;
    }

    .el-input__wrapper {
        background-color: #394760;
        border: none;
        box-shadow: none;
        border-radius: 20px;
    }

    .el-input__inner {
        color: white;
        height: 35px;
    }

    .monitor-table {
        width: 100%;
        height: calc(100% - 220px);
        .el-table {
            font-size: 12px;
        }

        .cell {
            margin: 0px 0;
        }

        /* 偶数行 */
        .el-table .el-table__row:nth-child(even) {
            background: #272E44;
            color: #9A9DAA;
        }

        /* 奇数行 */
        .el-table .el-table__row:nth-child(odd) {
            background: none;
            color: #9A9DAA;
        }

        .el-table .el-table__row td:first-child {
            border-radius: 0px 0 0 0px;
            padding-left: 0px;
        }

        .el-table .el-table__row td:last-child {
            border-radius: 0 0px 0px 0;
        }

    }
}


.detect-result {
    background: linear-gradient(to top, #2C334C, #1D2435);
    height: 200px;
    padding: 5px;

    .tooltip {
        margin-top: 5px;
    }

    .ellipsis-text {
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }
}


// 分页
.detect-pagination {
    width: 100%;
    position: absolute;
    bottom: 10px;
}

.detect-pagination2 {
    width: calc(100% - 700px);
}
</style>
    